<template>
  <div class="map-background">
    <div class="bg-circle bg-circle-1"></div>
    <div class="bg-circle bg-circle-2"></div>

    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
.map-background {
  width: 100%;
  height: 100%;
  background: #e2f1ff;
  position: relative;
  overflow: hidden;
}

.bg-circle {
  background-color: rgba(256 256 256 / 20%);
  border-radius: 100%;
  position: absolute;
  left: 48%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: blur(1px);

  &.bg-circle-1 {
    width: 100vh;
    height: 100vh;
  }

  &.bg-circle-2 {
    width: 75vh;
    height: 75vh;
  }
}
</style>
